<template>
  <view>
    <ul class="img-list">
      <li
        v-for="(t, i) in imageList"
        :key="i"
      >
        <img :src="t.url">
        <uni-icons
          type="trash"
          class="close"
          size="20"
          color="#e64340"
          @click="remove(i)"
        />
      </li>
      <li
        v-if="show"
        id="J_image"
        @click="addImage"
      >
        <image
          :src="require('@/static/public/camera.png')"
          class="icon"
        />
				<!-- <view class="tips">{{ tips }}</view> -->
      </li>

      <uni-load-more
        v-if="loading"
        status="loading"
        :content-text="contentText"
      />
    </ul>
  </view>
</template>

<script>
import uniIcons from '@/components/uni-icons/uni-icons.vue';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
export default {
  components: {
    uniIcons,
    uniLoadMore
  },
  props: {
    imageList: {
      type: Array,
      default: function() {
        return [];
      }
    },
    length: {
      type: Number,
      default: 9
    },
		tips: {
			type: String,
			default: ''
		}
  },
  data() {
    return {
      show: true,
      loading: false,
      contentText: {
        contentrefresh: '正在上传...'
      }
    };
  },
  watch: {
    imageList(val, newVal) {
      console.log(val.length, newVal.length);
      if (val.length >= this.length) {
        this.show = false;
      } else {
        this.show = true;
      }
    }
  },
  methods: {
    remove(i) {
      this.$emit('remove', i);
    },
    addImage() {
      let _this = this;
      uni.chooseImage({
        count: _this.length, //默认9
        sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], //从相册选择
        success: function(res) {
          // _this.lodalImages.push(res.tempFilePaths)
					// console.log('选择图片', res, _this.imageList, _this.length);
          let pics = [];
          if (res.tempFilePaths.length + _this.imageList.length > _this.length) {
            uni.showToast({
              title: `最多上传${_this.length}张`,
              icon: 'none'
            });
            return false;
          }
          for (let i = 0; i < res.tempFilePaths.length; i++) {
            pics.push(res.tempFilePaths[i]);
          }
          _this.upImage(pics);
        }
      });
    },
    async upImage(files) {
      for (let i = 0; i < files.length; i++) {
				await this.upServer(files[i]);
      }
    },
    upServer(file) {
      let _this = this;
      _this.loading = true;
      uni.uploadFile({
        url: _this.$store.state.proxyUrl + '/outing/mobile/material/upload', //仅为示例，非真实的接口地址
        header: {
					'content-type': 'multipart/form-data',
          token: _this.$store.state.token
        },
        filePath: file,
        name: 'file',
				fileType: 'image', // 钉钉小程序必填
        // formData: {
        // 	'tenantId': _this.$store.state.tenantId
        // },
        success: uploadFileRes => {
          let data = JSON.parse(uploadFileRes.data).data;
          _this.loading = false;
          _this.$emit('addImage', data);
        },
				fail: err => {
					console.log('上传失败', err);
					uni.showToast({
						title: `${err.errMsg}`
					});
					_this.loading = false;
				}
      });
    }
  }
};
</script>

<style lang="less" scoped>
/deep/ .uni-load-more {
  position: absolute;
  left: 250upx;
}

.icon {
  width: 60upx;
  height: 60upx;
}

.tips {
	font-size: 25upx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #555555;
	line-height: 37upx;
}

.img-list {
  margin: 0 20upx 30upx 0;
  overflow: hidden;

  li {
    position: relative;
    float: left;
    width: 81px;
    height: 81px;
    margin: 10px 10px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
		border: 1px solid rgba(0, 0, 0, 0.12);
		border-radius: 11upx;

    img {
      width: 100%;
      height: 100%;
    }

    .close {
      position: absolute;
      top: 5px;
      right: 5px;
      color: red;
      font-size: 14px;
    }

    &:last-child {
      font-size: 50px;
      text-align: center;
      color: #a5a5a5;
      background: #fbfbfb;
      // border: 1px dashed #a7a7a7;
    }
  }
}
</style>
